<template>
  <div class="booklistDetails statusBar">
    <van-nav-bar title="书单详情" left-arrow @click-left="returnFind" />
    <div class="box" v-if="booklistsDetailsData._id">
      <div class="info">
        <div class="title">{{booklistsDetailsData.title}}</div>
        <div class="desc">{{booklistsDetailsData.desc}}</div>
        <div class="other">
          <div class="author">{{booklistsDetailsData.author.nickname}}</div>
          <div class="readCount">{{booklistsDetailsData.readCount}}人阅读</div>
          <div class="created">{{booklistsDetailsData.created | formatDate("yyyy年MM月dd日")}}</div>
        </div>
      </div>
      <div class="bookList">
        <div class="item" v-for="(item, index) in booklistsDetailsData.books" :key="index" @click="goToBookDetails(item.book._id)">
          <img class="b-img" :src="item.book.cover" alt="">
          <div>
            <div class="b-title one-text">{{item.book.title}}</div>
            <div class="b-author">{{item.book.author}}</div>
            <div class="b-other">
              <div class="majorCate">{{item.book.majorCate}}</div>
              <div class="minorCate">{{item.book.minorCate}}</div>
            </div>
            <div class="b-wordCount">{{item.book.wordCount}}万字</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'BooklistDetails',

    data() {
      return {
        // 书单数据
        booklistsDetailsData: {}
      }
    },

    created() {
      this.getBooklistsDetails();
    },

    methods: {
      // 获取书单详情数据
      getBooklistsDetails() {
        this.axios.get(`booklists/${this.$route.query.bookId}`)
        .then(res => {
          // console.log('getBooklistsDetails res', res);
          if(res.status === 200) {
            res.data.bookList.books.forEach(v => {
              // 格式化字数
              v.book.wordCount = Math.floor(v.book.wordCount / 10000).toFixed(0);
              v.book.cover = decodeURIComponent(v.book.cover.split('/')[2]);
            })
            this.booklistsDetailsData = res.data.bookList;
            console.log(this.booklistsDetailsData);
          }
        }).catch(err => {
          console.log('err', err);
        })
      },

      // 转到书籍详情页
      goToBookDetails(bookId) {
        this.$router.push({name: 'BookDetails', query: {bookId}});
      },

      // 返回发现页
      returnFind() {
        this.$router.go(-1);
      },
    }
  }
</script>

<style lang="less" scoped>
::v-deep .van-nav-bar .van-icon {
  color: #00bb86;
}
::v-deep .van-nav-bar__title {
  color: #00bb86;
  font-size: 16px;
}
.box {
  position: fixed;
  top: 46px + 28px;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #eee;
  overflow-y: auto;
}
.info {
  padding: 20px;
  background-color: #fff;
  .title {
    max-width: 335px;
    color: #333;
    font-size: 14px;
    font-weight: bold;
  }
  .desc {
    margin: 5px 0;
    max-width: 335px;
    color: #999;
    // display: -webkit-box;
    // -webkit-box-orient: vertical;
    // -webkit-line-clamp: 2;
    // height: 250px;
    // text-overflow: ellipsis;
    // overflow: hidden;
  }
  .other {
    display: flex;
    align-items: center;
    color: #ccc;
    .created {
      margin-left: auto;
    }
  }
  .readCount {
    flex: 1;
    margin-left: 10px;
  }
}
.bookList {
  .item {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-top: 6px;
    padding: 15px;
    background-color: #fff;
    &::after {
      position: absolute;
      top: 50%;
      right: 20px;
      content: '';
      display: flex;
      width: 10px;
      height: 10px;
      border: 1px solid #ccc;
      border-bottom-color: transparent;
      border-left-color: transparent;
      transform: translateY(-50%) rotate(45deg);
    }
  }
  .b-img {
    margin-right: 15px;
    width: 60px;
    height: 80px;
    border-radius: 2px;
    box-shadow: 1px 1px 4px #aaa;
  }
  .b-title {
    margin-bottom: 5px;
    // max-width: 335px;
    color: #333;
    font-size: 14px;
    font-weight: bold;
  }
  .b-author {
    // max-width: 335px;
    color: #999;
  }
  .b-other {
    display: flex;
    align-items: center;
    margin: 3px 0;
    &>div {
      margin-right: 5px;
      padding: 0 5px;
      color: #ccc;
      font-size: 10px;
      border: 1px solid #ccc;
    }
  }
  .b-wordCount {
    color: #ccc;
  }
}
</style>